<template>
  <div class="flex-col w-full h-full p-0 m-0  mt-[-10px] ">
    <!-- 顶部 -->
     <BlogHeader>
      <template #left>
        <span class="text-2xl">数据概览</span>
      </template>
      <template #right>
        <Button type="primary" @click="handleEdit">新建文章</Button>
      </template>
     </BlogHeader>
    <!-- 个人信息 -->

    <Card 
    class="mt-[82px]"
    :head-style="{padding:'0 12px'}"
    >
      <template #title>
        <span class="text-lg">个人简介</span>
      </template>
      <div class="flex">
        <div class="flex items-center justify-center ">
          <Avatar v-if="userStore.avatarUrl" size="large" :src="userStore.avatarUrl"></Avatar>
          <Avatar v-else style="background-color: #87d068">
            <template #icon>
              <UserRound />
            </template>
          </Avatar>
        </div>
        <div class="flex-col items-center pl-4">
          <h3>{{ userStore.userName }}</h3>
          <p class="text-md text-gray-800">资深前端开发工程师 & 技术博主</p>
          <span class="text-sm text-gray-400">{{ "上海" }} - 注册于 {{ 2050 }}年</span>
        </div>
      </div>
      <p class="mt-4 text-md text-gray-800">专注于前端技术分享与实践经验总结，拥有超过 8 年的前端开发经验。热爱技术写作，致力于帮助更多开发者掌握现代前端技术栈。擅长 React、Vue.js 等主流
        框架，对性能优化和工程化有深入研究。 
      </p>
    </Card>
    <!-- echats数据展示 -->

    <Card
    class="mt-[12px]"
    :head-style="{padding:'0 12px'}"
    >
      <template #title>
        <span class="text-lg">数据展示</span>
      </template>
      <div class="flex w-full  h-[384px] bg-[#f5f5f5]"
      >
        <div class="bg-white rounded-md w-1/2 h-full">图一：折线图</div>
        <div class="bg-white rounded-md w-1/2 h-full ml-[12px]">图二：饼图</div>
      </div>
    </Card>
    

    <!-- 文章分类 -->
    <Card class="mt-[12px]"
    :head-style="{padding:'0 12px'}">
      <template #title>
        <div class="flex items-center justify-between">
          <span class="text-lg">文章分类</span>
          <Button>添加分类</Button>
        </div>
      </template>
      <Table
      :columns="[
        {
          title:'分类名称',
          dataIndex:'blogType',
        },
        {
          title:'分类名称',
          dataIndex:'blogType',
        },
        {
          title:'文章数量',
          dataIndex:'count',
        },
        {
          title:'创建时间',
          dataIndex:'createTime',
        },
        {
          title:'操作',
          dataIndex:'action',
        }
      ]">
      </Table>
    </Card>
    

    <!-- 标签管理 -->
     <Card class="mt-[12px]"
     :head-style="{padding:'0 12px'}">
      <template #title>
        <div class="flex items-center justify-between">
          <span class="text-lg">标签管理</span>
          <Button>新建标签</Button>
        </div>
      </template>
      <ul class="flex gap-3 text-sm">
        <li class="rounded-lg bg-blue-200">前端开发</li>
        <li class="rounded-lg bg-red-200">JavaScript</li>
        <li class="rounded-lg bg-yellow-200">Vue.js</li>
        <li class="rounded-lg bg-gray-200">React</li>
        <li class="rounded-lg bg-purple-200">Node.js</li>
      </ul>
     </Card>

    <!-- 草稿箱 -->
    <Card class="mt-[12px]"
    :head-style="{padding:'0 12px'}"
    :body-style="{padding:'12px'}">
      <template #title>
        <div class="flex items-center justify-between">
          <span class="text-lg">草稿箱</span>
          <Button>删除</Button>
        </div>
      </template>     
      <ul class="flex gap-5 flex-wrap justify-center mt-3">
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <h4>微前端架构实验</h4>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <div>高性能前端项目</div>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <div>深入理解虚拟DOM</div>
          <p class="text-ellipsis-2 flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验,分享在大型项目中实施微前端的经验,分享在大型项目中实施微前端的经验,分享在大型项目中实施微前端的经验,分享在大型项目中实施微前端的经验,分享在大型项目中实施微前端的经验分享在大型项目中实施微前端的经验
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <h4>微前端架构实验</h4>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <h4>微前端架构实验</h4>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <h4>微前端架构实验</h4>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
        <li class="flex flex-col w-[346px] h-[146px] p-3 overflow-hidden"
        :class="myCard">
          <h4>微前端架构实验</h4>
          <p class="flex text-ellipsis mt-4 mb-4 max-h-[40px]">分享在大型项目中实施微前端的经验...
          </p>
          <footer class="mt-auto flex justify-between">
            <span>2023-2-10</span>
            <div class="flex items-center gap-2">
              <a href="">继续编辑</a>
              <a href="">删除</a>
            </div>
          </footer>
        </li>
      </ul>
    </Card>
  </div>
</template>
<script setup lang="ts">
import { Button ,Table,Avatar,Card} from 'ant-design-vue';
import '@/assets/globle.css'
import BlogHeader from '@/components/BlogHeader.vue';
import { myCard,myHeader } from '@/const/style';

import { useUserStore } from '@/store/userStore';
import { onMounted } from 'vue';
import { UserRound } from 'lucide-vue-next';
import { useRoute,useRouter } from 'vue-router';
const userStore = useUserStore()
const router = useRouter()
onMounted(async ()=>{
  // await Promise.all([userStore.handleInit()]);
})

const handleEdit = () => {
  router.push('/article/edit')
}
</script>
<style lang="less" scoped>
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>